<!--
* @author: lzm
* @date: 2023年11月27日10:52:10
* @description：人员管理-历史登录时间弹窗
* @update: 2023年11月27日10:52:16
-->
<template>
  <div>
    <el-dialog
      :title="type === 1 ? '领用详情' : (type === 2 ? '归还详情' : title)"
      :visible="showUseDialog"
      width="888px"
      center
      custom-class="my-dialog  table-normal"
      @close="close"
    >
      <el-table
        :data="detailsTable"
        fit
        style="width: 100%"
        header-row-class-name="tableHeader"
        header-cell-class-name="tableTrHeader"
        row-class-name="tableRow"
        cell-class-name="tableCell"
      >
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column prop="goodsName" label="物料名称" align="center" />
        <el-table-column prop="goodsModel" label="规格型号" align="center" />
        <el-table-column prop="" label="物料缩略图" align="center">
          <template v-slot="{ row }">
            <img
              v-if="row.goodsImage"
              :src="row.goodsImage"
              style="width: 60px; height: 60px"
            />
            <img v-else src="@/assets/shelf_manage_img/shelf-item.png" />
          </template>
        </el-table-column>
        <el-table-column prop="shelvesName" label="货架名称" align="center" />
        <el-table-column prop="shelvesCode" label="货架编号" align="center" />
        <el-table-column prop="positionCode" label="库位号" align="center" >
          <template v-slot="{ row }">
            {{row.layerSort}}-{{row.positionCode}}
          </template>
        </el-table-column>
        <el-table-column prop="realCount" label="操作数量" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
export default {
  components: {},
  props: {
    showUseDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '领用详情'
    },
    id: {
      type: [Number, String]
    },
    inOutList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      addForm: {},
      detailsTable: [], // 领用详情
      type: 0 // 0-正常 1-出库 2入库
    }
  },
  created() {

  },
  watch: {
    id: {
      handler(val) {
        // console.log(this.inOutList, "明细")
        // this.detailsTable = this.inOutList.filter((ele) => (ele.goodsId === val || val === ele.id))
      },
      immediate: true
    }
  },
  computed: {},
  filters: {
    formatDate(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  methods: {
    async renderList() {},
    initData(data, type){
      this.detailsTable = data
      this.type = type
    },
    // 关闭弹窗清空所有值
    close() {
      this.$emit('update:showUseDialog', false)
      this.$emit('update:id', null)
      this.$emit('clearFn')
      this.addForm = {}
      this.detailsTable = []
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/styles/_handle.scss';

.el-row {
  text-align: center;
}
// 弹窗样式
::v-deep .el-dialog--center .el-dialog__body {
  padding: 0px 25px 30px;
}
// 表格样式
::v-deep .el-table {
  margin-top: 12px;
  background: transparent;
  border: none;
  // 表头行样式
  .tableHeader {
    height: 48px;
    -webkit-clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 15%,
      100% 85%,
      calc(100% - 10px) 100%,
      10px 100%,
      0 85%,
      0 15%
    );
    clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 15%,
      100% 85%,
      calc(100% - 10px) 100%,
      10px 100%,
      0 85%,
      0 15%
    );
  }
  // 表头单元格样式
  .tableTrHeader {
    background-color: transparent;
    border: none;
    font-weight: 400;
    color: #fff;
    font-size: 18px;
  }
  // 表格行样式
  .tableRow {
    background-color: transparent;
    border: none;
  }
  // 表格单元格样式
  .tableCell {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
  }
}
// 去除表头底部横线
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border: none;
}
// 取消表格底部横线
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: none;
}
::v-deep .el-table__body-wrapper {
  height: 50vh;
  overflow-y: auto;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::v-deep .el-table__empty-block {
  font-size: 18px;
}
</style>
